<template>
<div v-loading="loading" style="width: 100vw;height: 100vh;background: #EEEEEE">
  <el-row>
    <top :title="title" :isSecond="1" />
  </el-row>
  <el-row style="margin-top: 4vh;">
    <el-cascader
      v-model="semester"
      placeholder="学年学期选择"
      :options="semesterOption"
      class="punishment_cascader"
      @change="handleChange"></el-cascader>
  </el-row>
  <el-row>
    <div class="info" v-for="(item, index) in semesterInfo" :key="index">
      <div class="info-first">
        <span>{{ item.time }}</span>
        <span align="right" style="color:red;font-weight:bold;">{{ item.type }}</span>
      </div>
      <div class="info-sec">
        <p>
          {{ item.content }}
        </p>
      </div>
      <div class="info-third">
        <span align="left">地点：{{ item.place }}</span>
      </div>
      <div class="info-button">
        <el-button>查看详情</el-button>
      </div>
    </div>
  </el-row>
  <el-row>
    <bottom />
  </el-row>
</div>
</template>

<script>
import top from '@/components/top'
import bottom from '@/components/bottom'
export default {
  name: 'punishment',
  data () {
    return {
      loading: false,
      title: '处分情况',
      semester: 0,
      semesterOption: [],
      semesterInfo: [
        {
          time: '2000/6/3',
          type: '记过',
          content: '学校大型考试---大学生CET-4考试作弊行为',
          place: 'A-308'
        }, {
          time: '2000/6/3',
          type: '记过',
          content: '学校大型考试---大学生CET-4考试作弊行为',
          place: 'A-308'
        }
      ]
    }
  },
  methods: {
    handleChange () {}
  },
  components: {
    top,
    bottom
  }
}
</script>

<style lang="stylus" scoped>

.punishment_cascader
  width: 84vw
.info
  width: 84vw
  height: 30vh
  margin: 3vh auto
  background: white
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.25);
  border-radius: 10px;
  display flex
  flex-direction column
  justify-content space-around
  align-items center
.info-first
  display flex
  align-items center
  justify-content space-between
  width: 76vw
  height: 4vh
  margin: 0 auto
  padding-top: 2vh
.info-sec
  width: 76vw
  height: auto
  line-height: 4vh
  font-size: 1rem
  display flex
  justify-content flex-start
  margin-left: -4vw
.info-third
  width: 76vw
  height:auto
  display flex
  justify-content flex-start
.info-button
  width: 76vw
  height:auto
  display flex
  justify-content flex-end

</style>
